<template>
  <div>
    这是首页

    <div class="flex">     
      <div class="fg1">
         <Form label-position="right" :labe-widht="150">
         <grid-layout
        :layout.sync="list"
        :col-num="24"
        :row-height="60"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
        @layout-updated="layoutUpdatedEvent"
        @layout-ready="layoutReadyEvent"
        >
        <grid-item v-for="(item,idx) in list"
          class="item"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="idx">
          <FormItem :label="item.title">
          <component :is="item.type" :v-bind="item.props"></component>
          </FormItem>
        </grid-item>
      </grid-layout>
      </Form>
      </div>
      <div class="right">
        <h3>这是标题</h3>
        <ul>
          <li v-for="(li, i) in items" :key="li.dbColumnName">
            {{ $u.toHump(li.dbColumnName) }} {{ li.columnDescription }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import VueGridLayout from 'vue-grid-layout';
  const GridLayout = VueGridLayout.GridLayout
  const GridItem = VueGridLayout.GridItem
export default {
  data() {
    return {
      api: null,
      items: [],
      list: [],
      layout: [],
       layoutMap: []
    };
  },
  components: {GridLayout,GridItem},
  created() {
    console.warn("params", this.$route.params);
    this.items = this.$route.params.base.columns;
    this.init()
  },
  methods: {
    init() {
      this.list = this.items
        .filter((u) => {
          return u.isPrimaryKey || u.baseType < 2;
        })
        .map((u) => {
          let item = {
            field: u.dbColumnName,
            title: u.columnDescription,
            // value: "",
            col: {
              span: 12,
            },
          };
          this.getInputType(item, u);
          let rules = [];
          //可空校验
          if (!u.isNullable) {
            let required = {
              required: true,
              message: "请输入" + u.columnDescription,
              trigger: "blur",
            };
            rules.push(required);
          }
          if (u.length > 0) {
            rules.push({
              type: "string",
              max: u.length,
              message: "最多" + u.length + "字符",
            });
          }
          if (rules.length > 0) {
            item.validate = rules;
          }
          item.x=0;
          item.y=0;
          item.w=12;
          item.h=1;
          item.i=item.field
          if(["editor","textarea"].indexOf(item.type)>-1){
            item.width=24;
            item.h=10;
          }
          return item;
        });
      console.table(this.list);
    },
    getValueType(item) {
      let type = "string";
      if (["smallint", "int", "bigint"].indexOf(item.dataType) > -1) {
        type = "number";
      }
      return type;
    },
    getInputType(item, u) {
      let constrols = [
        {
          id: 0,
          type: "Input",
          props: {
            type: "text",
          },
        },
        {
          id: 1,
          type: "Input",
          props: {
            type: "textarea",
          },
        },
        {
          id: 2,
          type: "input-number",
        },
        {
          id: 3,
          type: "date-picker",
          props: {
            type: "date",
          },
        },
        {
          id: 4,
          type: "dictionary",
          props: {
            code: `System.DbEnityDefined.Unit`,
          },
        },
        {
          id: 5,
          type: "editor",
          col: {
            span: 24,
          },
        },
        {
          id: 6,
          type: "input-file",
        },
        {
          id: 7,
          type: "input-file",
          props: {},
        },
        {
          id: 8,
          type: "select",
        },
        {
          id: 9,
          type: "input-image",
        },
        {
          id: 10,
          type: "dictionary",
          props: {
            code: `System.DbEnityDefined.Unit`,
          },
        },
        {
          id: 11,
          type: "color-picker",
        },
        {
          id: 12,
          type: "input-icon",
        },
      ];
      if (u.inputType < constrols.length) {
        item = Object.assign(item, constrols[u.inputType]);
      } else {
        item = Object.assign(item, constrols[0]);
      }
      delete item.id;
    },
    // 组件更新完成生命周期
    layoutReadyEvent(newLayout) {
    
    },
    layoutUpdatedEvent(newLayout) {
      
    },
  },
};
</script>

<style lang="less">
.flex {
  .fg1 {
    background-color: aliceblue;
  }
  .right {
    width: 200px;
    background: #f7f7f7;
  }
}
</style>
